<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>

</head>
<body>

    <!-- 单选按钮 -->
    <div id="app1">
        <input type="radio" v-model="picked" :value="value" />
        <label>单选按钮</label>
        <p>{{ picked }}</p>
        <p>{{ value }}</p>
    </div>


    <!-- 复选框 -->

    <div id="app2">
        <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2" />
        <label>复选框</label>
        <p>{{ toggle }}</p>
        <p>{{ value1 }}</p>
        <p>{{ value2 }}</p>

    </div>



    <!-- 下拉框 -->
    <div id="app3">
        <select v-model="selected">
            <option :value="{ number: 123 }">123</option>
        </select>

        {{ selected.number }}

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {
                picked: false,
                value: 123
            }
        });

        var app2 = new Vue({
            el: "#app2",
            data: {
                toggle: false,
                value1: 'a',
                value2: 'b'
            }
        });

        var app3 = new Vue({
            el: "#app3",
            data: {
                selected: ''
            }
        });


    </script>

</body>
</html>